<template>
  <el-dialog v-model="visible" :width="450" :before-close="close" top="20vh">
    <template #header>
      <div class="my-header">
        <h2>验证码登录</h2>
        <!-- <el-link @click="is_password = !is_password" :underline="false" type="warning"> 其他方式登录 </el-link> -->
      </div>
    </template>
    <el-form :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form" ref="loginFormRef">
      <!-- 用户名 -->
      <el-form-item prop="phone">
        <el-input v-model="loginForm.phone" placeholder="手机号">
          <template #prefix>
            <span class="iconfont icon-shoujihao"></span>
          </template>
        </el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="test" v-if="is_password">
        <el-input v-model="loginForm.test" placeholder="验证码">
          <template #prefix>
            <span class="iconfont icon-yanzhengyanzhengma"></span>
          </template>
          <template #append>
            <el-button @click="getPhone">获取验证码</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password" v-else>
        <el-input v-model="loginForm.password" type="password" placeholder="密码">
          <template #prefix>
            <span class="iconfont icon-mima"></span>
          </template>
          <!-- <template #append>
            <el-button @click="getPhone">获取验证码</el-button>
          </template> -->
        </el-input>
      </el-form-item>
      <el-form-item class="btns">
        <el-space style="width: 100%" :size="30" :fill="true">
          <el-button style="width: 100%; height: 40px" type="danger" @click="login">登录</el-button>
        </el-space>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
// import qs from 'qs'
export default {
  name: 'login',
  // components: {
  //   CircleCloseFilled,
  // },
  props: {
    visible: Boolean,
  },
  emits: ['update:visible', 'done'],
  data() {
    var checkMobeli = (rule, value, callback) => {
      const regMobile = /^1[34578]\d{9}$/
      if (regMobile.test(value)) {
        return callback()
      }
      // 返回一个错误提示
      callback(new Error('请输入合法的手机号码'))
    }
    return {
      dialogVisble: false,
      loginForm: {
        username: '',
        password: '',
        test: '',
        phone: null,
      },
      loginFormRules: {
        username: [
          // 用户名窗口效验
          {
            required: true,
            message: '请输入登录用户名',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
          },
          { validator: checkMobeli, trigger: 'blur' },
        ],
        password: [
          // 密码框效验
          {
            required: true,
            message: '请输入登录密码',
            trigger: 'blur',
          },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur',
          },
        ],
        test: [
          // 密码框效验
          {
            required: true,
            message: '请输入验证密码',
            trigger: 'blur',
          },
          {
            min: 6,
            max: 6,
            message: '长度在 6 个字符',
            trigger: 'blur',
          },
        ],
      },
      is_password: true,
    }
  },

  methods: {
    login() {
      this.$refs.loginFormRef
        .validate()
        .then(() => {
          let url = ''
          let send = {}
          if (this.is_password === false) {
            url = 'login'
            send = {
              account: this.loginForm.phone,
              password: this.loginForm.password,
            }
          } else {
            url = 'login/mobile'
            send = {
              phone: this.loginForm.phone,
              captcha: this.loginForm.test,
            }
          }

          this.$http
            .post(url, send)
            .then((res) => {
              if (res.data.code === 200) {
                this.setSessionItem('token', res.data.data.token)
                this.setSessionItem('isLogin', true)
                this.setSessionItem('phone', res.data.data.phone)
                // 获取购物车数量
                this.$http
                  .get('cart/count', {
                    params: {
                      numType: true,
                      type: 'total',
                    },
                  })
                  .then((res) => {
                    if (res.data.code === 200) {
                      console.log(res.data.data)
                      this.setSessionItem('cartNum', res.data.data.count)
                    } else {
                      this.$message.error(res.data.message)
                    }
                  })
                  .catch((e) => {
                    this.$message.error(e.message)
                  })
                this.$emit('done')
                this.loginForm = {
                  username: '',
                  password: '',
                  test: '',
                  phone: null,
                }
              } else {
                this.$message.error(res.data.message)
              }
            })
            .catch((e) => {
              this.$message.error(e.message)
            })
        })
        .catch(() => {})
    },
    close() {
      this.$emit('done')
      this.$refs.loginFormRef.clearValidate()
      this.loginForm = {
        username: '',
        password: '',
        test: '',
        phone: null,
      }
    },
    // 获取验证码
    getPhone() {
      console.log(123)
      this.$refs.loginFormRef.validateField('phone', (errMsg) => {
        if (errMsg) {
          // const hide = this.$message.loading('获取验证码中...', 0)
          const phone = this.loginForm.phone.toString()
          this.$http
            .post('sendCode?phone=' + phone)
            .then((res) => {
              // hide()
              if (res.data.code === 200) {
                this.loginForm.test = res.data.data.code
              } else {
                this.$message.erroe(res.data.message)
              }
            })
            .catch((e) => {
              this.$message.erroe(e.message)
            })
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 30px;
  box-sizing: border-box;
  h2 {
    font-size: 28px;
  }
}
</style>
